<template>
  <div>
    <button 
    @click="tab" 
    v-if="bool">点击搜索</button>
    <input 
    v-else 
    ref="inp"
    type="text">
  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',

  data() {
    return {
      bool: true
    };
  },
  methods: {
    tab() {
      // bool 修改, DOM 更新是异步的, 所以无法立即获取到 inp 对象
      this.bool = !this.bool
      // 获取到 inp 后聚焦
      this.$nextTick(() => {
      this.$refs.inp.focus()
      })
    }
  },
};
</script>

<style lang="scss" scoped>

</style>